<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="t('routes.demo.documentManager.objBindModal.objectClassBindSet')"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :destroyOnClose="true"
      :minHeight="450"
      :width="600"
    >
      <Row type="flex" :gutter="12">
        <Col flex="1">
          <div style="overflow-y: scroll; overflow-x: hidden; height: 500px">
            <Tree
              checkable
              :checkStrictly="checkStrictly"
              :tree-data="objData"
              v-model:checkedKeys="checkedKey"
              @select="selectObj"
              @check="checkObj"
            />
          </div>
        </Col>
        <Col flex="1">
          <Checkbox
            v-model:checked="checkAll"
            :indeterminate="indeterminate"
            @change="onCheckAllChange"
            >{{ t('routes.demo.documentManager.objBindModal.selectAll') }}</Checkbox
          >
          <Divider />
          <div style="overflow-y: scroll; overflow-x: hidden; height: 400px">
            <CheckboxGroup
              v-model:value="selectedCheckKeys"
              :options="plainOptions"
              style="display: grid"
            />
          </div>
        </Col>
      </Row>
      <template #insertFooter>
        <span style="float: left">
          <Checkbox v-model:checked="checkForS" @change="onCheckChange">{{
            t('routes.demo.documentManager.objBindModal.selectChildren')
          }}</Checkbox>
        </span>
      </template>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Row, Col, Tree, Checkbox, CheckboxGroup, Divider } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getDataDirectoryApi } from '/@/api/demo/flow';
  import { getBindingObjectList, updateBindingObjectList } from '/@/api/demo/document';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const objData = ref<any>([]);
  const checkedKey = ref<any[]>([]);
  const selectedCheckKeys = ref<string[]>([]);
  const plainOptions = ref<any[]>([]);
  const checkAll = ref<boolean>(false);
  const indeterminate = ref<boolean>(true);
  const checkStrictly = ref<boolean>(true);
  const checkForS = ref<boolean>(false);

  const { createMessage } = useMessage();

  async function handleSubmit() {
    if (checkedKey.value === undefined || checkedKey.value.length === 0) {
      createMessage.warning(t('routes.demo.documentManager.objBindModal.selectDataDirectory'));
    } else {
      const params = {
        folderIdList: checkedKey.value,
        docTypeIdList: selectedCheckKeys.value,
      };
      updateBindingObjectList(params).then(() => {
        createMessage.success(t('routes.demo.documentManager.objBindModal.bindSuccess'));
      });
      closeModal();
      handleCancel();
    }
  }

  async function handleCancel() {
    checkedKey.value = [];
  }

  const selectObj = (selectedKeys) => {
    getBindingObjectList(selectedKeys[0]).then((res) => {
      plainOptions.value = res.allTypeList.map((item) => {
        return {
          label: item.value,
          value: item.label,
        };
      });
      selectedCheckKeys.value = res.selectTypeList;
    });
  };

  const checkObj = (checkedKeys) => {
    checkedKey.value = checkedKeys.checked;
  };

  const onCheckAllChange = (e) => {
    selectedCheckKeys.value = e.target.checked ? plainOptions.value.map((item) => item.value) : [];
    indeterminate.value = false;
  };

  const onCheckChange = (e) => {
    checkForS.value = e.target.checked;
    checkStrictly.value = !e.target.checked;
  };

  // 定义弹窗是否可见
  const [register, { closeModal }] = useModalInner((data) => {
    getDataDirectoryApi(data.treeKey).then((res) => {
      objData.value = res;
    });
    getBindingObjectList(data.treeKey).then((res) => {
      plainOptions.value = res.allTypeList.map((item) => {
        return {
          label: item.value,
          value: item.label,
        };
      });
      selectedCheckKeys.value = res.selectTypeList;
    });
  });
</script>
